<template>
  <div>
    <!-- <h1>   - - - - - - - 我是音乐页面- - - - - - -  </h1> -->
    <input type="text" v-model="music_msg" @keyup.enter="search" placeholder="请输入要查询的歌曲名">

    <h2 class="recom_title">每日推荐</h2>

    <div class="musicbox" v-for="item in recommendList" :key="item.song_id" @click="playMusic(item.song_id)">
      <img :src="item.pic_huge">
      <div>
        <h2>{{item.title}}</h2>
        <h3>{{item.album_title}}</h3>
        <h3>{{item.info}}</h3>
        <p>作者：{{item.author}}</p>
        <p>上传时间：{{item.publishtime}}</p>
        <p>语言：{{item.language}}</p>
        <p>发行公司：{{item.si_proxycompany}}</p>
      </div>
    </div>


  </div>
</template>


<script>

export default {
  data() {
    return {
      music_msg:'',
      recommendList:[]

    };
  },
  methods: {
    search(){
      
      let _this = this
      if(_this.music_msg!=''){
        _this.$router.push('/home/music/music_search_details/?name='+_this.music_msg)
      }else{
        _this.$toast('请输入歌曲名称，谢谢～～')
      }

      
    },
    getRecommendMusic(){
      let _this = this
      _this.$axios.get('/music/recommend/list').then(res=>{
        // console.log(res.data)
        _this.recommendList = res.data.data
      })
    },

    getMusic(){
      let _this = this
      _this.$axios.get('/music/song/detail?songId=114921778').then(res=>{
        console.log(res.data)
      })
    },
    playMusic(id){
      this.$router.push('/home/music/music_box?id='+id)
    }

  },
  created(){
    // this.getMusic()
    this.getRecommendMusic()
  }
};

</script>

<style lang="less" scoped>

  input[type="text"]{
    width: 85%;
    line-height: 35px;
    border-radius: 15px;
    display: block;
    margin: 20px auto;
    border-color: #aaa;
    -webkit-appearance: none;
    text-indent: 8px;
    font-size: 16px;
    color: #555;
    font-weight: 300;
    &:focus{
      border-color: violet;
    }
  }
  .recom_title{
    width: 85%;
    line-height: 30px;
    border-radius: 15px;
    margin: 20px auto;
    background-color: #f5f5f5;
    text-align: center;
    font-size: 15px;
    color: #666;
    font-weight: 300;
    letter-spacing: 2px;
  }

  .musicbox{
    width: 85%;
    line-height: 1;
    border-radius: 15px;
    margin: 8px auto;
    background-color: #f5f5f5;
    font-size: 15px;
    color: #333;
    font-weight: 300;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    img{
      height: 80px;
    }

    div{
      margin-left: 5px;
      h2{
        font-size: 13px;
        margin: 3px 0;
      }
      h3{
        font-size: 11px;
        margin: 3px 0;
      }
      p{
        font-size: 10px;
        line-height: 1.2;
        margin: 3px 0;
      }
    }
  }


</style>
